<template>
  <div>
    <el-row>
      <el-col>
        <el-form :inline="true" :model="formInline">
          <el-form-item>
            <el-input size="mini" v-model="formInline.num" placeholder="请输入耗材编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input size="mini" v-model="formInline.name" placeholder="请输入耗材名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select clearable size="mini" v-model="formInline.type" placeholder="请选择类型">
              <el-option label="入库" value="1"></el-option>
              <el-option label="出库" value="2"></el-option>
              <el-option label="报废" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="buttonList">
      <el-col>
        <!-- <el-button :disabled="btnDisabled" type="primary" size="mini" @click="addMaterial()">入库</el-button>
        <el-button :disabled="btnDisabled" type="primary" size="mini" @click="edit('view')">查看</el-button>
        <el-button type="danger" size="mini">启/禁用</el-button> -->
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          border
          size="mini"
          style="width: 100%">
          <el-table-column
                  align="center"
                  type="selection"
                  width="55">
          </el-table-column>
          <el-table-column
            align="center"
            prop="NUM"
            width="170px"
            label="耗材编号">
          </el-table-column>
          <el-table-column
            align="center"
            width="170px"
            prop="NAME"
            label="耗材名称">
          </el-table-column>
          <el-table-column
            align="center"
            prop="QUANTITY"
            width="170px"
            label="数量">
          </el-table-column>
          <el-table-column
            align="center"
            prop="STARTQUANTITY"
            width="170px"
            label="操作前数量">
          </el-table-column>
          <el-table-column
            align="center"
            prop="ENDQUANTITY"
            width="170px"
            label="操作后数量">
          </el-table-column>
          <el-table-column
            align="center"
            prop="UNIT"
            width="170px"
            label="单位">
          </el-table-column>
          <el-table-column
            align="center"
            prop="REASON"
            width="300px"
            label="原因 ">
          </el-table-column>
          <el-table-column
            align="center"
            prop="CREATEUSERNAME"
            width="170px"
            label="操作人">
          </el-table-column>
          <el-table-column
            align="center"
            prop="CREATETIME"
            width="150px"
            label="操作时间">
            <template slot-scope="scope" v-if="scope.row.CREATETIME">
              {{new Date(scope.row.CREATETIME).toLocaleString()}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="TYPE"
            label="类型"
            fixed="right">
            <template slot-scope="scope">
              {{scope.row.TYPE == 1 ? '入库' 
              : scope.row.TYPE == 2 ? '出库' 
              : scope.row.TYPE == 3 ? '报废' 
              : '错误类型'}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 30, 50, 100]"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "trainBase",
    data() {
      return{
        pagination: {
          pageSize: 10,
          total: 1,
          pageNo: 1
        },
        warnPagination: {
          pageSize: 500,
          total: 1,
          pageNo: 1
        },
        form: {
          id: '',
          purchaseTime: '',
          reason: '',
          remarks: '',
          materialPurchaseDetaileds: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入计划名称', trigger: 'blur' },
          ],
          purchaseTime: [
            { required: true, message: '请选择采购日期', trigger: 'blur' },
          ],
          reason: [
            { required: true, message: '请输入采购原因', trigger: 'blur' },
          ],
          MATERIALPURCHASECOMPANY: [
            { required: true, message: '请输入采购数量', trigger: 'blur' },
          ],
          MATERIALPURCHASEPRICE: [
            { required: true, message: '请输入采购单价', trigger: 'blur' },
          ],
          MATERIALPURCHASECOMPANY: [
            { required: true, message: '请输入供应商', trigger: 'blur' },
          ],
        },
        formLabelWidth: '120px',
        dialogFormVisible: false,
        formInline: {},
        tableData: [],
        warnTableData: [],
        userList: [],
        selectId: [],
        btnDisabled: true,
        isEdit: false,
        isWarnEdit: false,
        nptDisabled: false,
        examineDisabled: false
      }
    },
    created() {
      this.search();
    },
    methods: {
      search() {
        let form = {
          num: this.formInline.num,
          name: this.formInline.name,
          type: this.formInline.type,
          pageSize: this.pagination.pageSize,
          pageNo: 1
        }
        this.$post('/material/findMaterialDetailed', form ).then(res => {
          this.tableData = res.data.data.dataList;
          this.pagination.total = res.data.data.total;
        })
      },
      handleSelectionChange(val) {
        this.selectId = val;
        if(val.length === 1) {
          this.btnDisabled = false;
        } else {
          this.btnDisabled = true;
        }
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        this.getMaterialPurchaseDetailed(size, this.pagination.pageNo);
      },
      handleCurrentChange(page) {
        this.pagination.pageNo = page;
        this.getMaterialPurchaseDetailed(this.pagination.pageSize, page);
      },
    }
  }
</script>

<style scoped lang="scss">
  .dateStyle{
    /deep/.el-input__inner {
      padding-left: 30px !important;
    }
  }
  /deep/.el-form-item__error {
    top: 32px;
  }
</style>
